{include file="public/header" /}

<body style="background-color: #f1f1f1;" class="gerenziliao">
<div>
    <form action="{:url('index/user_info')}" class="horizontal" method="post" role="form" >
        <ul>
            <li class="touxiang">
                <span>修改图像</span>
                <div class="right" id="avatar">
                    <div id="avatar-container">
                        {if condition="($user['avatar'] == '')"}
                        <img src="__STATIC__/index/imgs/head_nan.jpg" alt="">
                        {else /}
                        <img src="{$user.avatar}" alt="">
                        {/if}
                        <strong></strong>
                    </div>
                </div>
                <!--<div class="propor">-->
                <!--<img src="__STATIC__/index/imgs/black.png" alt="">-->
                <!--<div class="center">-->
                <!--<div>-->
                <!--<div class="tupian">-->
                <!--<input type="file" value="拍照" class="sc_zp" name="" id="pz">-->
                <!--<label for="pz" class="">拍照</label>-->
                <!--</div>-->
                <!--<div class="tupian">-->
                <!--<input type="file" value="从手机相册上传" class="sc_zp" id="xc" ><label for="xc">从手机相册上传</label>-->
                <!--</div>-->
                <!--<a  class="cancle">取消</a>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
            </li>
            <!-- id的  盒子 -->
            <li class="">
                <span>ID</span>
                <div class="right">
                    <span>{$user.id}</span>
                </div>
            </li>
            <!-- 昵称的  盒子 -->
            <li class="nicheng">
                <span>昵称</span>
                <div class="right">
                    <span>{$user.name ?? ''}</span>
                    <strong></strong>
                </div>
                <!-- 修改昵称 弹出层的 代码 -->
                <div class="propor">
                    <img src="__STATIC__/index/imgs/black.png" alt="">
                    <div class="center">
                        <div>
                            <p>修改昵称</p>
                            <div class="floor_1">
                                <div>
                                    <img src="__STATIC__/index/imgs/person_btn.png" alt="">
                                    <input type="text" name="name" value="{$user.name ?? ''}">
                                </div>
                            </div>
                            <div class="floor_2">
                                <a class="cancle">取消</a>
                                <a class="sure">完成</a>
                            </div>

                        </div>
                    </div>
                </div>
            </li>
            <!-- 性别的  盒子 -->
            <li class="sex_sel">
                <span>性别</span>
                <div class="right">
                    <span>{$user['sex']|get_sex_str}</span>
                    <strong></strong>
                </div>
                <!-- 修改昵称 弹出层的 代码 -->
                <div class="propor">
                    <img src="__STATIC__/index/imgs/black.png" alt="">
                    <div class="center">
                        <div>
                            <p>修改性别</p>
                            <div class="sel_box">

                                <div class="">
                                    <label for="man">
                                        <input type="radio" id="man" name="sex" value="男">
                                        男
                                    </label>
                                </div>
                                <div class="">
                                    <label for="woman">
                                        <input type="radio" id="woman" name="sex" value="女">
                                        女
                                    </label>
                                </div>
                            </div>
                            <div class="floor_2">
                                <a class="cancle">取消</a>
                                <a class="sex_sure">完成</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <!-- 退出按钮 的开始 -->
        <div class="tuichu">
            <a>
                <input type="button" class="ajax-post" value="保存"></a>
        </div>
        <!-- 退出按钮 的结束 -->
    </form>
</div>
<!-- 中间的　　列表的结束　啊 -->
</body>
{include file="public/footer" /}

<script>
    window.onload =function(){

        $(".gerenziliao ul li>div.propor>img").click(function(){
            $(this).parent().hide();
        });
        // 点击个人资料的
        $(function(){
            $(".gerenziliao ul li.sex_sel .right").click(function(){
                $(this).parent().find(".propor").show();
            });
            $(".gerenziliao ul li>div.propor .center div  .floor_2>a.cancle").click(function(){
                $(".gerenziliao ul li.sex_sel .propor").hide()
            });

            $(".gerenziliao ul li.sex_sel>div.propor .center div .floor_2>a.sex_sure").click(function(){
                var  new_sex = $(this).parent().parent().find("div input:checked").val();
                //alert("选择的是"+new_sex);
                // 弹出框的  value   为 获取到的 name

                $(".gerenziliao ul li.sex_sel .right span").text(new_sex);
                $(".gerenziliao ul li.sex_sel .propor").hide();

            });
        });
        $(".gerenziliao ul li.sex_sel .right").click(function(){
            var sex = $(".gerenziliao ul li.sex_sel .right span").text();
            console.log(sex);
            if(sex == "男"){
                $(".gerenziliao ul li.sex_sel>div.propor .center .sel_box input#man").attr("checked",'checked');
            }else{
                $(".gerenziliao ul li.sex_sel>div.propor .center .sel_box input#woman").attr("checked",'checked');
            }
        });
        <!-- $(document).on("click",".gerenziliao ul li.sex_sel>div.propor .center div .floor_2>a.sex_sure",function(){ -->
        <!-- var  new_sex = $(this).parent().parent().find("div input:checked").val(); -->
        <!-- alert("选择的是"+new_sex); -->
        <!-- // 弹出框的  value   为 获取到的 name -->

            <!-- $(".gerenziliao ul li.sex_sel .right span").text(new_sex); -->
            <!-- $(".gerenziliao ul li.sex_sel .propor").hide(); -->
            <!-- }); -->
            // $(".gerenziliao ul li.sex_sel>div.propor .center div .floor_2>a").click(function(){
            //     var  new_sex = $(this).parent().parent().find("li.sex_sel div input:checkbox[name='sex']:checked").val();
            //     console.log(new_sex);
            //     // 弹出框的  value   为 获取到的 name
            //     $(".gerenziliao ul li.sex_sel div.propor .center div .floor_1 div input").val(name);
            //     $(".gerenziliao ul li.sex_sel .propor").hide();
            //     $(".gerenziliao ul li.sex_sel .right span").text(new_sex);
            // });



            //点击头像;头像的选择按钮弹出来
                $(function(){
                    $(".gerenziliao ul li.touxiang .right").click(function(){
                        $(this).parent().find(".propor").show();
                    });
                    $(".gerenziliao ul li.touxiang>div.propor .center div a.cancle").click(function(){
                        $(".gerenziliao ul li.touxiang .propor").hide();
                    });
                });


        // 点击 姓名  获取姓名 
        $(function(){
            $(".gerenziliao ul li.nicheng .right").click(function(){
                $(this).parent().find(".propor").show();
            });
            $(".gerenziliao ul li>div.propor .center div  .floor_2>a.cancle").click(function(){
                $(".gerenziliao ul li.nicheng .propor").hide()
            });
        })
        $(".gerenziliao ul li.nicheng .right").click(function(){
            var  name = $(".gerenziliao ul li.nicheng .right span").text();
            console.log(name);
            // 弹出框的  value   为 获取到的 name
            $(".gerenziliao ul li.nicheng div.propor .center div .floor_1 div input").val(name);
        });
        $(".gerenziliao ul li>div.propor .center div .floor_2>a.sure").click(function(){
            var  new_name = $(this).parent().parent().find(".floor_1 div input").val();
            console.log(new_name);
            // 弹出框的  value   为 获取到的 name
            $(".gerenziliao ul li.nicheng div.propor .center div .floor_1 div input").val(new_name);
            $(".gerenziliao ul li.nicheng .propor").hide();
            $(".gerenziliao ul li.nicheng .right span").text(new_name);
        });
    }
</script>
<script src="__STATIC__/common/webuploader/webuploader.min.js"></script>
<script type="text/javascript">



    var uploader = WebUploader.create({
        auto: true,
        swf:'__ASSETS__/lib/webuploader/Uploader.swf',
        server:'{:url("common/upload/uploadFile")}',
        pick:'#avatar',
        fileVal:'pic'
    })

    uploader.on('uploadSuccess', function(file, response){

        if (response.error == 0) {
            var html = '<img src="'+response.url+'"  width="123px" height="104px"/>';
            html += '<input type="hidden" name="avatar" value="'+response.url+'" />';
            $('#avatar-container').html(html);
        }
    });


</script>

</body>
</html>